<template>
  <div class="mul_box" v-drag.offset.clamp drag-trigger>
    <div
      class="numericalValue"
      v-if="HomeContent.Default.GroundResistanceData.value.Test"
    >
      {{ HomeContent.Default.GroundResistanceData.value.Value }}
    </div>
    <span class="volt" v-if="HomeContent.Default.GroundResistanceData.value.Test"
      >v~</span
    >
    <img
      src="/images/主界面-仪表_slices/Test_on2.png"
      class="TestOn"
      @click="Test"
      v-if="test"
    />
    <img
      src="/images/主界面-仪表_slices/Test_off(1).png"
      class="TestOff"
      @click="Test"
      v-else
    />
    <img
      src="/images/主界面-仪表_slices/表笔-红2.png"
      style="position: absolute; top: -21px; left: 303px; width: 29px; z-index: 1"
    />
    <div class="RedTwoData" style="font-size: 19px">
      <span>{{ HomeContent.Default.insulationData.value.Mark }}</span>
    </div>
    <img
      src="/images/主界面-仪表_slices/表笔-红3.png"
      style="position: absolute; top: -73px; left: 244px; width: 28px; z-index: 1"
    />
    <img
      src="/images/主界面-仪表_slices/表笔-绿2.png"
      style="position: absolute; top: -25px; left: 182px; width: 31px; z-index: 1"
    />
    <div class="GreenTwoData" style="font-size: 19px">
      <span>{{ HomeContent.Default.insulationData.value.Mark }}</span>
    </div>
    <img src="/images/主界面-仪表_slices/旋钮.png" @click="rotate" class="slices" />
    <div class="StylusBox">
      <img
        src="/images/主界面-仪表_slices/表笔-绿-选中.png"
        alt=""
        class="Blackwatchpen"
        v-if="
          HomeContent.Default.GroundResistanceData.value.BlackPenLink == '' &&
          HomeContent.Default.GroundResistanceData.value.BlackPenSelect
        "
        @click="ClickPenBlack(1)"
      />
      <img
        src="/images/主界面-仪表_slices/表笔-绿.png"
        alt=""
        class="Blackwatchpen nor"
        v-if="
          HomeContent.Default.GroundResistanceData.value.BlackPenLink == '' &&
          HomeContent.Default.GroundResistanceData.value.BlackPenSelect == false
        "
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/主界面-仪表_slices/表笔-红-选中.png"
        alt=""
        class="Redwatchpen"
        v-if="
          HomeContent.Default.GroundResistanceData.value.RedPenLink == '' &&
          HomeContent.Default.GroundResistanceData.value.RedPenSelect
        "
        @click="ClickPenRed(1)"
      />
      <img
        src="/images/主界面-仪表_slices/表笔-红.png"
        alt=""
        class="Redwatchpen nor"
        v-if="
          HomeContent.Default.GroundResistanceData.value.RedPenLink == '' &&
          HomeContent.Default.GroundResistanceData.value.RedPenSelect == false
        "
        @click="ClickPenRed(2)"
      />
      <img
        src="/images/主界面-仪表_slices/表笔-绿-使用中.png"
        class="Blackwatchpen"
        v-if="HomeContent.Default.GroundResistanceData.value.BlackPenLink != ''"
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/主界面-仪表_slices/表笔-红-使用中.png"
        class="Redwatchpen"
        v-if="HomeContent.Default.GroundResistanceData.value.RedPenLink != ''"
        @click="ClickPenRed(2)"
      />
    </div>
    <div class="operateTab T3">
      <img src="/images/ic_放回.png" class="ico_1" />
      <span class="tabTxt" @click="OpenMul">放回</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "../../../../runtime/generate/message/ClientMessage";
import WebSocketComponent from "../../../../runtime/module/WebSocket/WebSocketComponent";
import { reactive, ref, onMounted } from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";

const test = ref(false);
const state = reactive({
  redType: false,
  blackType: false,
});
function Test() {
  test.value = !test.value;
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.GNDRESISTORMETER_BUTTON_TEST
    )
  );
}
const angle = ref(0);
const angleVal = ref("-54deg");
async function rotate() {
  //换挡
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.GNDRESISTORMETER_GEARS
    )
  );
  HomeContent.Default.GroundResistanceData.value = JSON.parse(newArr.Content).Result;
  console.log(
    "HomeContent.Default.GroundResistanceData.value",
    HomeContent.Default.GroundResistanceData.value
  );

  if (JSON.parse(newArr.Content).Result.Gear == 1) {
    angle.value = 0;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 0) {
    angle.value = -54;
    angleVal.value = angle.value + "deg";
  }
}
function ClickPenBlack(val: number) {
  state.blackType = !state.blackType;
  if (state.blackType) {
    state.redType = false;
  }
  if (val == 2) {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.GNDRESISTORMETER_BLACKPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.GNDRESISTORMETER_BLACKPEN_SELECT
      )
    );
  }
}
//放回
function OpenMul() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.GNDRESISTORMETER_CLOSE
    )
  );
  HomeContent.Default.GroundResistanceType.value = false;
}
function ClickPenRed(val: number) {
  state.redType = !state.redType;
  if (state.redType) {
    state.blackType = false;
  }
  if (val == 2) {
    //选中
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.GNDRESISTORMETER_REDPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.GNDRESISTORMETER_REDPEN_SELECT
      )
    );
  }
}
</script>

<style scoped>
.mul_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 555px;
  height: 386px;
  background-image: url("/public/images/主界面-仪表_slices/接地电阻检测仪.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.numericalValue {
  width: 209px;
  text-align: center;
  color: #000000;
  position: absolute;
  left: 122px;
  top: 122px;
  font-family: "DS-DIGI-1";
  font-size: 61px;
}
.volt {
  font-family: none;
  font-size: 30px;
  position: absolute;
  top: 154px;
  left: 288px;
  color: #000000;
}
.TestOn {
  position: absolute;
  top: 227px;
  left: 207px;
  width: 94px;
}
.TestOff {
  position: absolute;
  top: 245px;
  left: 225px;
  width: 60px;
}
.slices {
  position: absolute;
  top: 215px;
  left: 355px;
  width: 111px;
  transform: rotate(v-bind(angleVal));
}
.RedTwoData {
  position: absolute;
  width: 110px;
  height: 31px;
  background-color: #000000;
  border-radius: 4px;
  top: -30px;
  left: 234px;
  line-height: 31px;
  z-index: 2;
  text-align: center;
}
.GreenTwoData {
  position: absolute;
  width: 110px;
  height: 31px;
  background-color: #000000;
  border-radius: 4px;
  top: -52px;
  left: 108px;
  line-height: 31px;
  text-align: center;
}
.StylusBox {
  width: 100px;
  height: 300px;
  position: absolute;
  right: -110px;
  top: 40px;
}
.Blackwatchpen {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 292px;
}

.Redwatchpen {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 292px;
}

.nor {
  top: 2px;
  width: 36px;
  height: 288px;
  margin: 0 2px;
}
.operateTab {
  width: 92px;
  height: 34px;
  background: #000000;
  border-radius: 4px 4px 4px 4px;
  opacity: 0.9;
  line-height: 34px;
  display: table-cell;
  vertical-align: middle;
}

.tabTxt {
  font-size: 16px;
  color: #fff;
}

.tabTxt:hover {
  color: #a2f95e;
}

.ico_1 {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: 5px;
  margin-right: 5px;
}
.T3 {
  position: absolute;
  right: -100px;
  bottom: 30px;
}
</style>
